<template>
  <!-- 我的钱包 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的钱包</span>
      </div>
      <div class="details-balance">
        <i class="el-icon-s-finance"></i>
        <p>侦迹币: 600</p>
        <p class="top-up">充 值</p>
      </div>
      <div class="p-tit">充值/消费记录</div>
      <div class="search-ipt">
        时间：
        <div class="picker">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        支付类型：
        <div class="select">
          <el-select v-model="value" placeholder="请选择职位">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        消费金额：
        <div class="select">
          <el-input v-model="input" placeholder="请输入消费金额"></el-input>
        </div>
        <p class="ser-btn">搜 索</p>
        <p class="heavy-btn">重 置</p>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <tablePurse :listarr="11111"></tablePurse>
    </div>
    <div class="paging">
      <div class="paging-body">
        <paging :pagingObj="pagingObj" @pageVal="pageVal"></paging>
      </div>
    </div>
  </div>
</template>

<script>
import tablePurse from "./components/tablePurse.vue";
import paging from "../../../../components/paging.vue";
export default {
  data() {
    return {
      input: "", // 消费金额
      value1: "", // 时间
      value: "", // sele框
      options: [
        {
          value: "1",
          label: "侦迹币",
        },
        {
          value: "2",
          label: "支付宝",
        },
        {
          value: "3",
          label: "微信",
        },
        {
          value: "4",
          label: "系统",
        },
      ],
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
    };
  },
  components: {
    tablePurse,
    paging,
  },
  methods: {
    pageVal(val) {
      this.pagingObj.currentPage = val;
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    margin: auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
    i {
      color: #3291f8;
      font-size: 35px;
      margin-left: 24px;
      margin-top: -3px;
    }
    .details-balance {
      margin-top: 10px;
      p {
        width: 150px;
        font-size: 16px;
        margin-left: 10px;
      }
      .top-up {
        width: 80px;
        font-size: 15px;
        text-align: center;
        color: #ffffff;
        border-radius: 5px;
        background-color: #3894ff;
      }
    }
    .p-tit {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      margin-top: 15px;
    }
    .search-ipt {
      margin-top: 15px;
      font-size: 14px;
      .picker {
        width: 250px;
        margin-right: 10px;
      }
      .select {
        width: 140px;
        margin-right: 10px;
        /deep/.el-input__inner {
          height: 35px !important;
          font-size: 14px;
        }
      }
      .ser-btn {
        width: 60px;
        height: 35px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        // border: 1px solid #3291f8;
        background-color: #3894ff;
        border-radius: 5px;
      }
      .heavy-btn {
        margin-left: 10px;
        color: #e99d42;
      }
    }
  }
  // 中间div放表格
  .table {
    width: 93%;
    // height: 510px;
    min-height: 510px;
    // margin-top: 10px;
    margin: auto;
  }
  // 底部div放分页
  .paging {
    width: 93%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 30px;
    display: flex;
    .paging-body {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      margin: auto;
    }
  }
}
</style>
